<template>
  <div class="thermal-analysis-main">
    <div class="main-content">
      <div class="main-content-weeks" v-for="(item, i) in 12" :key="i" :style="getBackColor(i)">{{ item }}月</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="System">
import { reactive } from "vue";
const props = defineProps({
  data: {
    type: Array<number>,
    required: false,
    default: () => []
  }
});
const colorList = reactive(["#DFE5E6FF", "#AEEEF0FF", "#7EE3E7FF", "#5DDCE0FF", "#5ECCD1FF", "#FFDABEFF"]);
const getBackColor = i => {
  let color = colorList[0];
  const num = props.data[i] || 0;
  if (num > 75 && num < 150) color = colorList[1];
  if (num >= 150 && num < 225) color = colorList[2];
  if (num >= 225 && num < 300) color = colorList[3];
  if (num >= 300 && num < 375) color = colorList[4];
  if (num >= 375) color = colorList[5];
  return {
    background: color
  };
};
</script>

<style scoped lang="scss">
.thermal-analysis-main {
  width: 100%;
  height: 100%;
  .main-content {
    display: grid;
    grid-template-rows: repeat(3, 48px);
    grid-template-columns: repeat(4, 86px);
    gap: 4px;
    place-content: center center;
    height: 100%;
    .main-content-weeks {
      display: grid;
      align-items: end;
      padding: 8px;
      font-size: 12px;

      // color: var(--el-text-color-primary);
      color: rgb(0 0 0 / 65%);
    }
  }
}
</style>
